import React from "react";
import Link from 'umi/link';
import { Row, Col, Table, message } from 'antd';
import { connect } from 'dva';
import ElectricityHeaderLeft from './ElectricityHeaderLeft';

import SearchElecticityForm from './SearchElecticityForm';

interface IProps {
  dispatch?: Function,
  children?: React.ReactNode,
  deviceWisdomElectriccity?: {
    data: Array<any>,
    dataCnt: number
  },
  loading?: boolean;
  query?: any;
}

let setPageNum = 1;

@connect(({ analyse_device, loading, routing }) => ({
  deviceWisdomElectriccity: analyse_device.deviceWisdomElectriccity,
  loading: loading.effects['analyse_device/queryDeviceWisdomElectriccity'],
  query: routing.location.query,
}))
class StatisticalElectricity extends React.PureComponent<IProps> {

  state = {
    current: 1,
    isChangePage: false
  };

  queryData = (params) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'analyse_device/queryDeviceWisdomElectriccity',
      payload: params
    });
  };

  initCurrent = () => {
    this.setState({
      current: 1
    })
  };

  handleExport = e => {
    const { dispatch, query } = this.props;

    dispatch({
      type: 'analyse_device/queryDeviceWisdomElectriccityAll',
      payload: {
        pageNum: 1,
        pageSize: 10000,
        id: query.id
      }
    });
  };

  componentDidMount() {
    this.queryData({
      pageNum: 1,
      pageSize: 10
    });
  }

  render() {
    const { deviceWisdomElectriccity = { data: [], dataCnt: 0 } } = this.props;
    const { data, dataCnt } = deviceWisdomElectriccity;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: item.id,
      name: item.name,
      networkAddr: item.networkAddr ? item.networkAddr : '/',
      addressName: item.buildName ? `${item.buildName}${item.floorName ? item.floorName : ''}${item.areaName ? item.areaName : ''}` : '/',
      receiveTime: item.receiveTime ? item.receiveTime : '/',
      runStatusName: item.runStatusName ? item.runStatusName : '/',
      voltageValue: item.valueMap ? item.valueMap.voltage ? item.valueMap.voltage : '/' : '/',
      currentValue: item.valueMap ? item.valueMap.ampere ? item.valueMap.ampere : '/' : '/',
      leakage: item.valueMap ? (Object.keys(item.valueMap).filter(item => item.indexOf('leakage') === 0).map(v => item.valueMap[v])) : '/',
      temperatureOne: item.valueMap ? item.valueMap.temperature1 ? item.valueMap.temperature1 : '/' : '/',
      temperatureTwo: item.valueMap ? item.valueMap.temperature2 ? item.valueMap.temperature2 : '/' : '/',
      temperatureThree: item.valueMap ? item.valueMap.temperature3 ? item.valueMap.temperature3 : '/' : '/',
      temperatureFour: item.valueMap ? item.valueMap.temperature4 ? item.valueMap.temperature4 : '/' : '/',
      installationTime: item.installationTime ? item.installationTime : '/',
      wisdomElectricityOnlineTypeName: item.wisdomElectricityOnlineTypeName ? item.wisdomElectricityOnlineTypeName : '/',
      brandName: item.brandName ? item.brandName : '/',
      productName: item.productName ? item.productName : '/',
      tEArr: Array.isArray(item.valueRuleList) && item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'temperature')]
        ? [
          item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'temperature')].alarmLowerValue,
          item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'temperature')].alarmUpperValue
        ]
        : [],
      tW: Array.isArray(item.valueRuleList) && item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'temperature')] 
        ? item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'temperature')].preventUpperValue
        : '',
      lEArr: Array.isArray(item.valueRuleList) && item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'leakage')]
      ? [
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'leakage')].minValue,
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'leakage')].maxValue
      ]
      : []
    })
    ) : [];

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: 10,
      onChange: (current) => {
        setPageNum = current;
        this.setState({
          current,
          isChangePage: true
        });
        this.queryData({
          pageNum: current,
          pageSize: 10
        });
      },
    };

    const columns = [{
      title: '名称',
      dataIndex: 'name',
    }, {
      title: '安装位置',
      dataIndex: 'addressName',
    }, {
      title: '设备ID',
      dataIndex: 'networkAddr',
    }, {
      title: '接收时间',
      dataIndex: 'receiveTime'
    }, {
      title: '运行状态',
      dataIndex: 'runStatusName',
    }, {
      title: '电压值/V',
      dataIndex: 'voltageValue',
      render: (text, record) => (
        <Link
          to={`/data/analyse_device/deviceElectricityDetails?id=${record.key}`}
        >{text}</Link>
      )
    }, {
      title: '电流值/A',
      dataIndex: 'currentValue',
      render: (text, record) => (
        <Link
          to={`/data/analyse_device/deviceElectricityDetails?id=${record.key}`}
        >{text}</Link>
      )
    }, {
      title: '剩余电流值/mA',
      dataIndex: 'leakage',
      render: (text, record) => (
        <Link
          to={`/data/analyse_device/deviceElectricityDetails?id=${record.key}`}
        ><>{Array.isArray(text) ? text.map((v, index) => <span key={index} style={{ color: (record.lEArr && (v > record.lEArr[1] || v < record.lEArr[0])) ? '#e96201' : 'var(--primary-blue)' }}>{v || '/'}</span>) : '/'}</>
        </Link>
      )
    }, {
      title: '温度1/°C',
      dataIndex: 'temperatureOne',
      render: (text, record) => {
        return (
          <span style={{ color: (text > record.tEArr[1] || text < record.tEArr[0]) ? 'red' : (record.tW && text > record.tW ? '#e96201' : 'rgba(0, 0, 0, 0.65)') }}>{text}</span>
        );
      }
    }, {
      title: '温度2/°C',
      dataIndex: 'temperatureTwo',
      render: (text, record) => {
        return (
          <span style={{ color: (text > record.tEArr[1] || text < record.tEArr[0]) ? 'red' : (record.tW && text > record.tW ? '#e96201' : 'rgba(0, 0, 0, 0.65)') }}>{text}</span>
        );
      }
    }, {
      title: '温度3/°C',
      dataIndex: 'temperatureThree',
      render: (text, record) => {
        return (
          <span style={{ color: (text > record.tEArr[1] || text < record.tEArr[0]) ? 'red' : (record.tW && text > record.tW ? '#e96201' : 'rgba(0, 0, 0, 0.65)') }}>{text}</span>
        );
      }
    }, {
      title: '温度4/°C',
      dataIndex: 'temperatureFour',
      render: (text, record) => {
        return (
          <span style={{ color: (text > record.tEArr[1] || text < record.tEArr[0]) ? 'red' : (record.tW && text > record.tW ? '#e96201' : 'rgba(0, 0, 0, 0.65)') }}>{text}</span>
        );
      }
    }, {
      title: '安装时间',
      dataIndex: 'installationTime',
    }, {
      title: '联网方式',
      dataIndex: 'wisdomElectricityOnlineTypeName',
    }, {
      title: '厂家',
      dataIndex: 'brandName',
    }, {
      title: '型号',
      dataIndex: 'productName',
    }];

    return (
      <>
        <Row style={{ 'margin': '25px 30px' }}>
          <Col span={12}>
            <div className="head-left" style={{ 'margin': '10px 0 20px', 'fontSize': '18px', 'color': '#333' }}>基本信息</div>
            <ElectricityHeaderLeft />
          </Col>
          <Col span={12}>
            {/* <div className="head-right" style={{'margin': '10px 0 20px', 'fontSize': '18px', 'color': '#333'}}>地图</div>
            <ElectricityHeaderRight /> */}
          </Col>
        </Row>
        <Row>
          <SearchElecticityForm
            current={this.state.current}
            initCurrent={this.initCurrent}
            handleExport={this.handleExport}
          />
          <Table
            columns={columns}
            pagination={pagination}
            dataSource={ans}
            bordered
            loading={this.props.loading}
          />
        </Row>
      </>
    );
  }
}

export default StatisticalElectricity;
